<!-- 秒杀专区 -->
<template>
  <div class="nev">
    <div class="seckilling">
      <div class="seckillingup">
        <div class="left">
          <span class="left1">京东秒杀</span>
          <span class="left2">{{ hour }}</span>
          <img class="left3" src="@/assets/点场.png" alt="" />
          <!-- <span v-text="times[0]" class="left4"></span>&nbsp;:&nbsp;
            <span v-text="times[1]" class="left4"></span>&nbsp;:&nbsp;
            <span v-text="times[2]" class="left4"></span> -->
          <van-count-down :time="time1">
            <template #default="timeData">
              <span class="block" style="border-radius: 3px">{{
                timeData.hours
              }}</span>
              <span class="colon">:</span>
              <span class="block" style="border-radius: 3px">{{
                timeData.minutes
              }}</span>
              <span class="colon">:</span>
              <span class="block" style="border-radius: 3px">{{
                timeData.seconds
              }}</span>
            </template>
          </van-count-down>
        </div>
        <div class="right">
          <span>爆款轮番秒</span>
          <img class="right1" src="@/assets/右箭头.png" alt="" />
        </div>
      </div>
      <div class="seckillingdown">
        <div class="seckillingdownson">
          <div
            @click="particulars(v)"
            class="goods"
            v-for="(v, index) in goodss"
            :key="index"
          >
            <img :src="v.img1" alt="" />
            <span>￥{{ v.originprice }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
    <script>
import axios from "axios";
export default {
  methods: {
    //跳转到详情的方法 v:商品id
    particulars(v) {
      // this.$router.push({
      //   name: "hello",
      //   query: {
      //     proid: v.proid,
      //   },
      // });
    },
  },
  mounted() {
    axios({
      url: "http://118.178.238.19:3001/api/pro/seckilllist",
      params: {
        count: 1,
        limitNum: 6,
      },
      method: "get",
    }).then((res) => {
      this.goodss = res.data.data;
    });

    if (this.time.getHours() % 2 == 0) {
      this.hour = this.time.getHours() + 2;
      // this.time1 = this.time1 * 2;
    } else {
      this.hour = this.time.getHours() + 1;
      // this.time1 = this.time1 * 1;
    }
    let td = new Date();
    td.setMinutes(0);
    td.setHours(this.hour);
    td.setSeconds(0);
    let td1 = new Date();
    this.time1 = td.getTime() - td1.getTime();
  },
  data() {
    return {
      goodss: [],
      unrelated: "",
      time: new Date(),
      times: ["", "", ""],
      hour: "",
      time1: 1 * 60 * 60 * 1000,
    };
  },
};
</script>
        
    <style scoped>
.nev {
  width: 100vw;
  height: 42vw;
  background-color: #f6f6f6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.seckilling {
  width: 94.66666667vw;
  height: 36vw;
  background-color: #fff;
  /* margin: auto; */
  border-radius: 4vw;
}
.seckilling .seckillingup {
  width: 94.66666667vw;
  height: 9.06666667vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: 0 0/94.66666667vw 9.06666667vw url(@/assets/秒杀背景上.png)
    no-repeat;
}
.seckilling .seckillingup .left {
  display: flex;
  width: 48.26666667vw;
  align-items: center;
  height: 100%;
  color: #ff2727;
}
.seckilling .seckillingup .left .left1 {
  font-size: 3.33333333vw;
  color: #333;
}
.seckilling .seckillingup .left .left2 {
  font-size: 3.33333333vw;
  color: #ff2727;
}
.seckilling .seckillingup .left .left3 {
  width: 5.46666667vw;
  height: 4.66666667vw;
}
.seckilling .seckillingup .left .left4 {
  width: 4vw;
  height: 4.8vw;
  background-color: #ff2727;
  font-size: 1.6vw;
  color: #fff;
  border-radius: 1.33333333vw;
}
.seckilling .seckillingup .right {
  display: flex;
  width: 21.86666667vw;
  align-items: center;
  height: 100%;
  color: #f23030;
  font-size: 3.33333333vw;
}
.seckilling .seckillingup .right .right1 {
  width: 3.33333333vw;
}
.seckilling .seckillingdown {
  width: 94.66666667vw;
  height: 26.66666667vw;
  margin: auto;
  overflow: hidden;
}
.seckilling .seckillingdown .seckillingdownson {
  height: 26.66666667vw;
  overflow: scroll;
  display: flex;
  justify-content: space-between;
}
.seckilling .seckillingdown .seckillingdownson .goods {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 14.06666667vw;
  height: 27.2vw;
  margin: 0.16666667vw;
  text-align: center;
}
.seckilling .seckillingdown .seckillingdownson .goods img {
  width: 14.33333333vw;
  height: 15.33333333vw;
}
.seckilling .seckillingdown .seckillingdownson .goods span {
  width: 14.33333333vw;
  display: block;
  height: 4.2vw;
  color: #f2270c;
  font-size: 3.46666667vw;
  overflow: hidden;
}
.seckilling .seckillingdown .seckillingdownson .query {
  width: 5.33333333vw;
  height: 26.66666667vw;
  display: flex;
  color: #666;
  background-color: #f5f5f5;
  font-size: 1.86666667vw;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.seckilling .seckillingdown .seckillingdownson .query .jl {
  width: 3.2vw;
  height: 3.2vw;
  background: -28.53333333vw -29.2vw/53.33333333vw 53.33333333vw url(@/assets/精灵2.png)
    no-repeat;
}
.seckilling .seckillingdown .seckillingdownson .query {
  text-align: center;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
</style>